import React from 'react';
import {Typography} from 'antd';
import {CheckCircleOutlined, CloseCircleOutlined} from '@ant-design/icons';
import styles from './styles/PaymentResult.module.less';

const {Title, Text} = Typography;

interface PaymentResultProps {
  success: boolean;
  orders: any[];
  totalAmount: number;
}

const PaymentResult: React.FC<PaymentResultProps> = ({
                                                       success,
                                                       orders,
                                                       totalAmount
                                                     }) => {
  return (
    <div className={styles.container}>
      {success ? (
        <>
          <CheckCircleOutlined className={styles.successIcon}/>
          <Title level={3} className={styles.title}>
            支付成功
          </Title>
          <Text type="secondary" className={styles.subtitle}>
            订单支付已完成
          </Text>
          <div className={styles.orderList}>
            {orders.map(order => (
              <div key={order.id} className={styles.orderItem}>
                <Text>订单号: {order.id} - ¥{order.paidAmount?.toFixed(2)}</Text>
              </div>
            ))}
          </div>
          <div className={styles.totalAmount}>
            <Text strong>总计: ¥{totalAmount.toFixed(2)}</Text>
          </div>
        </>
      ) : (
        <>
          <CloseCircleOutlined className={styles.errorIcon}/>
          <Title level={3} className={styles.title}>
            支付失败
          </Title>
          <Text type="secondary" className={styles.subtitle}>
            支付过程中出现问题，请重试
          </Text>
        </>
      )}
    </div>
  );
};

export default PaymentResult;
